import React, { Component } from 'react'

import cs from 'classnames'
import moment from 'moment'
import _ from 'lodash'

import {
  Spin,
  Row,
  Col,
} from 'antd'

import { formatMoney } from 'config/money'
import { formatTitle } from 'config/title'
import { timeFormat } from 'config/time'
import { encryptPhone, encryptIdcard } from 'config/encrypt'

import style from './index.less'

export default ({
  // 订单id
  houseOrderId,
  /**
   * 订单状态
   *   0: 锁房成功
   *   1: 认购成功
   */
  payStatus,
  /**
   * 支付方式
   *   1: pos收款 (二维码)
   *   2: 线下收款
   *   3: 线上收款 (在线支付)
   */
  backup1,

  // 楼盘名称
  propertyName,
  // 楼盘期数名称
  housePreiodName,
  // 楼盘栋数
  buildNumName,
  // 楼层
  floor,
  // 房号
  householdNo,

  // 总价
  hTotalPrice,
  // 定金
  stationaryMoney,
  // 建面价格
  hosUnitPrice,
  // 建筑面积
  hosUnitArea,
  // 套内价格
  setInPrice,
  // 套内面积
  setInArea,

  // 姓名
  realName,
  // 手机号码
  phone,
  // 身份证号码
  idCardNo,

  // 办理截止时间
  manageEndDate,

  /**
   * 事件
   */
  // 点击二维码 当backup1
  onQRCodeClick = f => f,
  // 点击去支付
  onPayClick = f => f,
}) => {
  const mTime = moment(manageEndDate)

  // 可操作项
  // 1 pos收款 (二维码)
  // 2: 线下收款 啥也不显示
  // 3: 线上收款 (在线支付)
  //   判断支付是否成功
  //     如果未支付则显示 支付 按钮
  //     如果成功就显示"支付成功"
  //     如果失败就显示"支付失败"
  let action = null

  // temp
  // backup1 = '3'
  // payStatus = '0'

  switch (backup1) {
    // pos收款,显示二维码
    case '1':
      action = <div className = { style['card-qrcode'] } onClick = { onQRCodeClick } />
      break
    // 线下收款,啥也不显示
    case '2':
      action = null
      break
    // 线上收款
    case '3':
      switch (payStatus) {
        // 锁房成功则去支付
        case '0':
          action = <div className = { style['card-action'] } onClick = { onPayClick }>去支付</div>
          break
        // 认购成功
        case '1':
          action = <div className = { cs(style['card-action'], style['card-action-success']) }>支付成功</div>
          break
        // 支付失败 可以重新发起支付
        case '2':
          action = <div className = { style['card-action'] } onClick = { onPayClick }>重新支付</div>
          break
        // 支付超时
        case '9':
          action = <div className = { cs(style['card-action'], style['card-action-fail']) }>支付超时</div>
          break
      }

      break
  }

  return (
    <div
      className = {
        cs(style['card'], {
          [style[`_${ payStatus }`]]: !_.isNil(payStatus)
        })
      }
    >
      { action }
      <Seal backup1 = { backup1 } payStatus = { payStatus } />
      <div className = { style['card-header'] }>
        <h1 className = { style['type-house'] }>
          房源信息
        </h1>
      </div>
      <div className = { style['card-body'] }>
        <h2>
          {
            formatTitle({
              propertyName,
              housePreiodName,
              buildNumName,
              floor,
              householdNo,
            })
          }
        </h2>
        <Row gutter = { 10 }>
          <Col span = { 12 }>
            <div className = { style['card-info'] }>
              <div className = { style['card-info-title'] }>房屋总价</div>
              <div className = { style['card-info-value'] }>
                {
                  hTotalPrice
                }
              </div>
            </div>
          </Col>
          {
            stationaryMoney ?
              <Col span = { 12 }>
                <div className = { style['card-info'] }>
                  <div className = { style['card-info-title'] }>定金金额</div>
                  <div className = { style['card-info-value'] }>{ stationaryMoney }</div>
                </div>
              </Col> :
              null
          }
          <Col span = { 12 }>
            <div className = { style['card-info'] }>
              <div className = { style['card-info-title'] }>建面价格</div>
              <div className = { style['card-info-value'] }>{ hosUnitPrice }</div>
            </div>
          </Col>
          <Col span = { 12 }>
            <div className = { style['card-info'] }>
              <div className = { style['card-info-title'] }>建筑面积</div>
              <div className = { style['card-info-value'] }>{ hosUnitArea }</div>
            </div>
          </Col>
          <Col span = { 12 }>
            <div className = { style['card-info'] }>
              <div className = { style['card-info-title'] }>套内价格</div>
              <div className = { style['card-info-value'] }>{ setInPrice }</div>
            </div>
          </Col>
          <Col span = { 12 }>
            <div className = { style['card-info'] }>
              <div className = { style['card-info-title'] }>套内面积</div>
              <div className = { style['card-info-value'] }>{ setInArea }</div>
            </div>
          </Col>
        </Row>
      </div>
      <div className = { style['card-header'] }>
        <h1 className = { style['type-user'] }>
          客户信息
        </h1>
      </div>
      <div className = { style['card-body'] }>
        <div className = { style['card-info'] }>
          <div className = { style['card-info-title'] }>客户信息</div>
          <div className = { style['card-info-value'] }>{ realName }</div>
        </div>
        <div className = { style['card-info'] }>
          <div className = { style['card-info-title'] }>手机号码</div>
          <div className = { style['card-info-value'] }>{ encryptPhone(phone) }</div>
        </div>
        <div className = { style['card-info'] }>
          <div className = { style['card-info-title'] }>身份证号码</div>
          <div className = { style['card-info-value'] }>{ encryptIdcard(idCardNo) }</div>
        </div>
      </div>
      <div className = { style['card-header'] } style = { _.isNil(payStatus) ? {} : { marginRight: 120 } }>
        <h1 className = { style['type-time'] }>
          认购时间
        </h1>
      </div>
      <div className = { style['card-body'] }>
        <div className = { style['card-info'] }>
          <div className = { style['card-info-title'] }>认购截止时间</div>
          <div className = { style['card-info-value'] }>
            {
              mTime.isValid() ?
                mTime.format(timeFormat()) :
                '暂无'
            }
          </div>
        </div>
      </div>
    </div>
  )
}

const Seal = ({
  backup1,
  payStatus
}) => {
  const classString = cs(style['seal'], {
    [style['seal-success']]: payStatus === '1',
    [style['seal-fail']]: payStatus === '2' || payStatus === '9',
    [style['seal-timeout']]: payStatus === '9',
    [style['seal-house-success']]: payStatus === '0',
    // 如果是线下支付且是选房成功就没有下一步了,是单独的一个图标
    [style['seal-house-offline-success']]: payStatus === '0' && backup1 === '2',
  })

  return <div className = { classString } />
}
